<template>

<h1>投资项目列表</h1>

<table class="table table-bordered" border="1">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资总额度</th>
                <th>已投资金额</th>
                <th>剩余金额</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Invest" >
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Residue }}</td>
                <td>{{ item.I_Number }}</td>
                <td>
                    <input type="button" value="投资" @click="Jump(item.I_Id)" />&nbsp;&nbsp;
                </td>
            </tr>
        </tbody>

    </table>

    共有{{ Page.listCount }}条数据，每页显示{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.PCount }}页
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

//用于显示的响应式数据
const Invest = ref([{
    I_Id:'',
    I_Name:'',
    I_Budget:'',
    I_Receive:'',
    I_Residue:'',
    I_Number:''
}])

//用于查询的响应式数据
const FName = ref('');
const MinMoney = ref('');
const MaxMoney = ref('');

//用于分页的响应式数据
const Page = ref({
    PageIndex:1,//当前页
    PageSize:1,//每页显示数据条数
    listCount:0,//总条数
    PCount:0//总页数
})

//生命周期钩子函数
onMounted(()=>{
    ShowInvest();
})

//显示 查询 方法
const ShowInvest =()=>{
    axios({
        method:'get',
        url:'http://localhost:56707/api/Invest/ShowInvestInfo',
        params:{
            FName:FName.value,
            MinMoney:MinMoney.value,
            MaxMoney:MaxMoney.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(function(res){
        console.log(res.data);
        Invest.value = res.data.list;
        Page.value.listCount = res.data.listCount;
        Page.value.PCount = res.data.PCount;
    })
    .catch(function(err){
        console.log(err);
    })
}

//跳转到用户投资页面
const Jump = (Id:string)=>{
    router.push({
        name:'UserInvestAdd',
        params:{
            Id:Id
        }
    })
}


</script>